<template>
  <div class="editor">
    <el-form
      :model="formData"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      label-position="top"
    >
      <!-- 文章标题和图片地址 -->
      <div class="input-goup">
        <el-form-item label="文章标题" class="input" prop="title">
          <el-input
            v-model="formData.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片URL" class="input" prop="coverimg">
          <el-input
            v-model="formData.coverimg"
            placeholder="请输入图片URL地址"
          ></el-input>
        </el-form-item>
      </div>
      <!-- 文章描述 -->
      <el-form-item label="文章描述">
        <mavon-editor
          class="position"
          @save="saveDiscription"
          v-model="formData.describes"
        />
      </el-form-item>
      <!-- 文章内容 -->
      <el-form-item label="文章内容">
        <mavon-editor class="position" v-model="formData.content" />
      </el-form-item>
      <!-- 文章分类和标签 -->
      <div class="input-goup">
        <el-form-item label="分类" class="input" prop="cateName">
          <el-select
            v-model="formData.cateName"
            class="select"
            placeholder="请选择分类"
          >
            <el-option
              v-for="item in cate.data"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" class="input" prop="tagName">
          <el-select
            v-model="formData.tagName"
            class="select"
            placeholder="请选择标签(输入可添加新标签)"
            filterable
          >
            <el-option
              v-for="item in tag.data"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <el-button class="ft" type="primary" @click="send"> <i class="el-icon-check"></i> 发布</el-button>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  props: {
    // 父组件传过来表单的数据
    formValue: {
      type: Object,
      // required: true 父组件必须传值，不然会报错
      default: () => ({}) // 注意：函数直接返回一个对象的时候，需要在外层包裹一个括号()，另外数组也是归于对象
    }
  },
  data() {
    return {
      // 表单数据
      formData: {
        // 文章标题
        title: '',
        // 图片地址
        coverimg: '',
        // 文章描述
        describes: '',
        // 文章内容
        content: '',
        // 分类
        cateName: '',
        // 标签
        tagName: ''
      },
      // 表单验证规则
      // 表单所有元素的验证规则
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '标题一个字符~10个字符之间',
            trgger: 'blur'
          }
        ],
        coverimg: [
          { required: true, message: '请输入图片地址', trigger: 'blur' }
        ],
        cateName: [{ required: true, message: '请选择分类', trigger: 'blur' }],
        tagName: [{ required: true, message: '请选择标签', trigger: 'blur' }]
      }
    }
  },
  watch: {
    // 监听formValue
    formValue: {
      // 侦听器
      handler() {
        this.formData = this.formValue
      },
      // 页面第一次加载就监听
      immediate: true,
      // 深度监听，监听对象
      deep: true
    }
  },
  computed: {
    ...mapState('cate', ['cate']),
    ...mapState('tag', ['tag'])
  },
  methods: {
    ...mapActions('cate', ['getCateList']),
    ...mapActions('tag', ['getTag']),
    // 保存/发布
    send() {
      // console.log(this.formData)
      this.$emit('sendOrSave', this.formData)
    },
    // saveDiscription() {} ctrl + s markdown保存文字内容
    saveDiscription() {}
  },
  created() {
    // 获取分类列表
    this.getCateList({ curpage: 1, pagesize: 100 })
    // 获取标签列表
    this.getTag({ curpage: 1, pagesize: 100 })
  }
}
</script>

<style lang="less" scoped>
.editor {
  overflow: auto;
  padding: 0 20px 50px;
  .input-goup {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .input {
      width: 49%;
      .select {
        width: 100%;
      }
    }
  }
}
.ft {
  float: right;
}

.position {
  z-index: 98;
}
</style>
